<template>
	<view class="contain-main-box">
		<navigationTop navigationTitle="机房">
			<template slot="left">
				<view class="">
					<u-icon name="list" size="36" style="margin-left: 30rpx;" class="hoverClass" @click="openPop"></u-icon>
				</view>
			</template>
		</navigationTop>
			<u-icon name="reload" size="36" color="#999" :class="['refreshData',refreshFlag?'animationRotate':'']" @click="handleRefresh"></u-icon>
		<u-toast ref="uToast" />
		<view class="main-bg" >
			<view class="room-items wrap">
				<view class="isLoading" v-if="isLoading">
					<u-loading mode="circle" size="50"></u-loading>
				</view>
				<!-- 楼 -->
				<view class="item-image box-shadow clearFix">
					<!-- box -item  -->
					<navigator :url="'/pages/computerRoomView/computerRoomView?roomId='+item.id+'&roomName='+item.roomName" v-for="(item,index) in list" :key="index" class="item-box clearFix" hover-class='none'>
						<view class="">
							<view class="dot">
								<image :src="$store.state.baseImg+'/icon/powerSet.png'"></image>
								<view :class="['fx-pao',alarmLevel(item.r5)]" v-if="item.r4 != '0'" :style="{
									'background-image':'url('+$classNameUrl(alarmLevel(item.r5))+')'
								}">{{item.r4}}</view>
							</view>
							<view class="text-image">
								<text>{{item.roomName}}</text>
							</view>
						</view>
					</navigator>
					<!-- box end -->
				</view>
				<!-- end -->
			</view>
			<nav-tree :treeData="treeData"></nav-tree>
		</view>
		
	</view>
</template>

<script>
	import navTree from "@/components/navTree/navTree.vue";
	import navigationTop from "@/components/navigationTop/index.vue";
	import pullDown from "@/components/pullDown/index.vue"
	export default {
		components: {
			navTree,
			navigationTop,
			pullDown
		},
		data() {
			return {
				scrollTop:0,
				treeData:[],
				refreshFlag:false,
				list:[],
				isLoading:false
			}
		},
		computed:{
			alarmLevel(){
				return function(val){
					let level = "";
					switch (val){
						case "1":
						level = "fx-pao-blue"
							break;
						case "2":
							level = "fx-pao-yellow"
							break;
						case "3":
							level = "fx-pao-orange"
							break;
						default:
							level = "fx-pao-red"
							break;
					}
					this.$classNameUrl(level)
					return level
				}
			}
		},
		 mounted() {
			this.getList(); //获取列表
		 },
		methods: {
			openPop(){
				this.$store.commit('set_leftPoupShow', !this.$store.state.leftPoupShow)
			},
			handleRefresh(){
				if(this.refreshFlag || this.isLoading == true) return; //防止二次点击
				uni.startPullDownRefresh()
				this.refreshData()
			},
			// 点击更新数据
			refreshData(){
				this.refreshFlag = true
				this.getList().then((res)=>{
					this.refreshFlag = false;
					uni.stopPullDownRefresh();
					this.$refs.uToast.show({
						title: '更新成功',
						type: 'success',
						duration:1500
					})
				}).catch(()=>{
					uni.stopPullDownRefresh();
					this.refreshFlag = false
				})
			},
			showNav() {
				this.$store.commit('set_leftPoupShow', !this.$store.state.leftPoupShow)
			},
			// 获取列表数据
			getList(){
				this.isLoading = true
				return new Promise((resolve,reject)=>{
					this.$http.httpRequest({
						url: this.$api.mechineRoomData,
						methods:"get"
					}).then((res)=>{
						this.isLoading = false
						if(!res){
							reject(res)
							return uni.showToast({
								title:"服务器请求异常",
								icon:"none",
								duration:1500
							})
						}
						resolve(res);
						this.list = res.data.roomList;
						const tree =	this.handlerNavTree(this.list);
						this.treeData = tree;
					}).catch((err)=>{
						this.isLoading = false;
						reject(err);
					})
				})
			},
			// 对navTree操作数据
			handlerNavTree(arr){
				const tree = JSON.parse(JSON.stringify(this.$store.state.navTree))
				tree.forEach((item)=>{
					if(item.roomName == '南昌市机房'){
						item.children = arr
					}
				})
				// 设置store navTree
				this.$store.commit("set_navTree", tree)
				const tree_handled = this.$store.getters.doNavTree
				return tree_handled;
			}
		}
	}
</script>

<style scoped lang="scss">
	.refreshData{
		width: 60rpx;
		height: 60rpx;
		color:#333;
		position:fixed;
		right:30rpx;
		bottom:180rpx;
		box-shadow: 0 0 5px #999;
		border-radius: 50%;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 50;
	}
	.animationRotate{
		opacity: 0.5;
		animation: rotate 2s infinite linear;
	}
	@keyframes rotate{
		0%{transform: rotate(0deg);}
		50%{transform: rotate(180deg);}
		100%{transform: rotate(360deg);}
	}
	.room-items {
		padding: 20rpx 30rpx;
		min-height: calc( 100vh - 300rpx );
		position: relative;
		.isLoading{
			position: absolute;
			left: 50%;
			top: 60rpx;
			transform: translateX(-50%);
			z-index: 45;
		}
	}
	.item-image {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 30rpx;
		padding: 50rpx 30rpx;
		color: #212C67;
		font-size: 28rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.item-box {
		width: 25%;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.item-image .none-mar {
		margin-bottom: 0;
	}

	.item-image .dot {
		width: 86rpx;
		height: 77rpx;
		margin: 0 auto;
		position: relative;
	}

	.item-box image {
		width: 100%;
		height: 100%;
	}

	.item-box .fx-pao {
		width: 65rpx;
		height: 57rpx;
		right: -30rpx;
		top: -20rpx;
	}
	.hoverClass{
		transition: .1s;
		&:active{
			color: #999;
		}
	}
</style>
